<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tinyflow Quick Start</title>
    <link href="https://unpkg.com/@tinyflow-ai/ui/dist/index.css" rel="stylesheet">
    <script src="https://unpkg.com/@tinyflow-ai/ui/dist/index.umd.js"></script>
    <style>
        #app {
            width: 100%;
            height: 100vh;
        }
        body {
            padding: 0;
        }
        #resultModal {
            position: fixed;
            z-index: 1;
            right: 0;
            top: 20vh;
            width: 500px;
            height: 700px;
            overflow: auto;
            background-color: #fefefe;
            border: 1px black solid;
        }
        .modal-right {
            background-color: #fefefe;
            padding: 0;
            margin: 0;
            width: 100%;
        }
    </style>
</head>
<body onload="load()">
<div id="app"></div>
<!-- 结果显示模态框 -->
<div id="resultModal">
    <button onclick="save()">保存</button>
    <button onclick="openModal()">运行</button>

    <p>请输入运行参数：</p>
    <div id="paramsContainer"></div>
    <button onclick="submitParams()">提交</button>
    <div class="modal-right">
        <p>执行结果：</p>
        <pre id="resultText"></pre>
    </div>
</div>
<script src="config.js"></script>
<script>
    var id;
    var modal = document.getElementById("myModal");
    var resultModal = document.getElementById("resultModal");
    function getQueryParam(param) {
        // 获取当前页面的URL
        var urlParams = new URLSearchParams(window.location.search);
        // 返回指定参数的值
        return urlParams.get(param);
    }

    function openModal() {
        var paramArr = tinyflow.getData().nodes;
        console.log(paramArr)
        for (let i = 0; i < paramArr.length; i++) {
            if (paramArr[i].type === 'startNode') {
                var params = paramArr[i].data.parameters;
                var container = document.getElementById('paramsContainer');
                container.innerHTML = ''; // 清空之前的参数
                for (var key in params) {
                    container.innerHTML += `<label>${params[key].name}: <input type="text" id="${key}" value=""/></label><br/>`;
                }
                break;
            }
        }
    }

    function submitParams() {
        var paramArr = tinyflow.getData().nodes;
        var paramsObj = {};
        for (let i = 0; i < paramArr.length; i++) {
            if (paramArr[i].type === 'startNode') {
                var params = paramArr[i].data.parameters;
                for (var key in params) {
                    var param = params[key];
                    var element = document.getElementById(key);
                    if (!element) {
                        console.error('未找到元素:', key);
                        continue;
                    }
                    var value;
                    switch (param.dataType) {
                        case 'Boolean':
                            // 假设使用checkbox，获取checked属性
                            value = element.checked;
                            break;
                        case 'Number':
                            // 转换为数字，无效值转为NaN
                            value = Number(element.value);
                            break;
                        case 'File':
                            // 获取文件对象
                            value = element.files[0] || null;
                            break;
                        case 'Object':
                        case 'Array':
                            // 尝试解析JSON
                            try {
                                value = JSON.parse(element.value);
                            } catch (e) {
                                console.error(`参数“${param.name}”的JSON解析失败:`, e);
                                value = element.value; // 保留原始值或根据需求处理
                            }
                            break;
                        default: // String及其他未指定类型
                            value = element.value;
                    }
                    paramsObj[param.name] = value;
                }
                break;
            }
        }
        exec(paramsObj);
    }

    function save() {
        var name; // 将 name 变量提升到函数作用域
        // 检查 id 是否为空
        if (id === undefined || id === '' || id == null) {
            // 弹出输入框，获取用户输入的 name
            name = prompt("请输入 name 值：");
            if (name === null || name === '') {
                alert("name 不能为空！");
                return; // 如果用户没有输入 name，直接返回，不执行后续操作
            }
        }

        // 创建 data 对象
        var data = {
            "id": id,
            "data": tinyflow.getData()
        };

        // 如果 id 为空，添加 name 字段到 data 中
        if (id === undefined || id === '' || id == null) {
            data.name = name;
        }
        // 使用 fetch 发起 POST 请求
        fetch(`${BASE_URL}/workflow/save`, {
            method: "POST", // 请求方法
            headers: {
                "Content-Type": "application/json" // 设置请求头
            },
            body: JSON.stringify(data) // 发送 JSON 格式的数据
        })
            .then(response => {
                if (!response.ok) throw new Error('请求失败');
                return response.json();
            })
            .catch(error => {
                console.error('Fetch error:', error);
            });
    }
    function get(id) {
        fetch(`${BASE_URL}/workflow/get?id=${id}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (!response.ok) throw new Error('请求失败');
                return response.json();
            })
            .then(wf => {
                tinyflow = new Tinyflow.Tinyflow({
                    element: '#app',
                    data: JSON.parse(wf.graph),
                    provider: {
                        llm: ()  => [
                            {
                                value: 'llm',
                                label: 'llm',
                            }
                        ],
                        knowledge: () => []
                    }
                });
            })
            .catch(error => {
                console.error('Fetch error:', error);
            });
    }

    function exec(param) {
        const data = {
            param: param,
            data: tinyflow.getData()
        };

        fetch(`${BASE_URL}/workflow/exe`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => {
                if (!response.ok) throw new Error('请求失败');
                return response.json();
            })
            .then(json => {
                showResult(json);
            })
            .catch(error => {
                console.error('Fetch error:', error);
            });
    }
    function showResult(result) {
        const resultText = document.getElementById('resultText');
        resultText.innerHTML = ''; // 清空容器

        // 类型检查增强
        if (!isValidInput(result)) {
            resultText.innerHTML = '<div style="color: red">错误：参数必须是对象或数组</div>';
            return;
        }

        // 安全遍历自身可枚举属性
        Object.keys(result).forEach(key => {
            try {
                const div = document.createElement('div');
                div.innerHTML = `
                <span class="key">${escapeHtml(key)}</span>:
                <span class="value">${formatValue(result[key])}</span>
            `;
                resultText.appendChild(div);
            } catch (e) {
                console.error(`渲染属性 ${key} 时出错:`, e);
            }
        });
    }

    // 类型校验函数
    const isValidInput = (input) => {
        const type = Object.prototype.toString.call(input);
        return type === '[object Object]' || type === '[object Array]';
    };

    // 值格式化函数（核心改进）
    const formatValue = (value) => {
        if (value === null) return '<span class="null">null</span>';
        if (value === undefined) return '<span class="undefined">undefined</span>';

        switch (typeof value) {
            case 'object':
                // 处理特殊对象类型
                if (Array.isArray(value)) {
                    return `[ ${value.map(item => formatValue(item)).join(', ')} ]`;
                } else if (value instanceof Date) {
                    return `<time>${value.toISOString()}</time>`;
                }
                // 简单对象处理（限制递归深度可在此添加）
                return `{ ${Object.keys(value).map(k =>
                    `${k}: ${formatValue(value[k])}`
                ).join(', ')} }`;
            case 'string':
                return `<span class="string">"${escapeHtml(value)}"</span>`;
            case 'number':
                return `<span class="number">${value}</span>`;
            case 'boolean':
                return `<span class="boolean">${value.toString()}</span>`;
            default:
                return escapeHtml(String(value));
        }
    };

    // HTML转义防止XSS
    const escapeHtml = (str) => {
        const div = document.createElement('div');
        div.textContent = str;
        return div.innerHTML;
    };

    function load() {
        // 使用方法
        id = getQueryParam('id');
        if (id == null) {
            tinyflow = new Tinyflow.Tinyflow({
                element: '#app',
                data: {}
            });
        } else {
            get(id);
        }
    }
</script>
</body>
</html>